<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bentham&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Suranna&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">-->
    <title>Flexbox</title>
</head>
<body>
  <main class="container">
    <article class="card">
      <picture class="card__picture">
        <source srcset="images/pizza_small.jpg" media="(max-width: 768px)">
        <img class="card__img" src="images/pizza.jpeg" alt="Hawaiian chicket pizza on table">
      </picture>
      <div class="card__content">
        <h1 class="card__title">Hawaiian chicken pizza</h1>
        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias aliquid debitis dolorum error expedita fugit, impedit in labore mollitia nesciunt nostrum, officia, perferendis quaerat repellendus saepe tempora totam velit.</p>
        <ul class="card__tags tags">
          <li class="tags__item">Food</li>
          <li class="tags__item">Hawaiian pizza</li>
          <li class="tags__item">Chicken</li>
          <li class="tags__item">Dinner</li>
          <li class="tags__item">Delicious</li>
        </ul>
        <div class="card__bottom">
          <span class="card__price">$16.99</span>
          <button class="card__button button">Buy now</button>
        </div>
      </div>
    </article>
  </main>
</body>
</html>